<!--
 添加银行卡
 -->
<template>
  <div>
    <van-nav-bar :title="id ? '修改银行卡' : '添加银行卡'" left-arrow @click-left="onClickLeft" />
    <van-field :value="userName" label="户主名字" input-align="right" disabled required />
    <van-field v-model="bankCardNumber" type="number" label="银行卡号" placeholder="请输入本人银行卡号" maxlength="20" input-align="right" required />
    <van-field v-model="bankName" label="银行名称" placeholder="请选择银行" input-align="right" disabled @click="bankSelectShow = true" required >
      <van-icon slot="button" name="arrow-down" />
    </van-field>
    <van-field v-model="openingBank" label="开户网点" placeholder="请输入开户网点" input-align="right" required />
    <div class="btn" v-if="id" @click="sureHandle">修改信息</div>
    <div class="btn" v-else @click="sureHandle">添加</div>
    <div class="btn" v-if="id" @click="delHandle">解除绑定</div>
    <van-popup v-model="bankSelectShow"  position="bottom" :close-on-click-overlay="false" >
      <van-picker  show-toolbar :columns="bankNameList" @cancel="onCancel" @confirm="onConfirm"/>
    </van-popup>
  </div>
</template>
<script>
import Vue from "vue";
import { mapState, mapActions} from "vuex";
import { NavBar, Icon, Field, Toast, Dialog, Popup, Picker, Cell } from "vant";
Vue.use(Field)
  .use(NavBar)
  .use(Icon)
  .use(Dialog)
  .use(Cell)
  .use(Popup)
  .use(Picker)
  .use(Toast);
export default {
  data() {
    return {
      bankCardNumber: this.$route.query.bankCardNumber,
      bankName: this.$route.query.bankName,
      openingBank: this.$route.query.openingBank,
      userName: '',
      id: this.$route.query.id || '',
      bankNameList:[],
      bankSelectShow: false
    };
  },
  computed: {
    ...mapState({
      currentCard: state => state.bankCard.currentCard,
      bindPhone: state => state.user.bindPhone,
    })
  },
  mounted() {
    // 从store中取带过来的数据,有id,说明是编辑
    this.getBankConfig()
  },
  methods: {
    ...mapActions('bankCard',["setCurrentCard"]),
    onClickLeft() {
      this.$router.replace({path:'/bankCard',query:{from:this.$route.query.from}});
    },
    getBankConfig(){
      this.$http.post("/bankCard/initBankCardInfo")
      .then(res => {
        let data = res.info
        this.userName = data.cardName
        this.bankNameList = data.bankNameList || []
      })
    },
    delHandle() {
      Dialog.confirm({
        title: "提示",
        message: "确认移除该银行卡吗"
      }).then(() => {
         let query = Object.assign({},this.$route.query,{
          bankCardNumber: this.bankCardNumber,
          bankName: this.bankName,
          userName: this.userName,
          openingBank: this.openingBank,
          id: this.id,
          mode: 'del',
        })
        this.$router.replace({ path:'bankCheck', query});
      });
    },
    sureHandle() {
      if (
        !this.bankCardNumber ||
        !this.bankName ||
        !this.userName ||
        !this.openingBank
      ) {
        Toast("请填写必填信息");
        return;
      }
      if (!this.bindPhone) {
        Toast('请去设置->账户安全中绑定手机号')
        return
      }
      if(this.bankCardNumber.length >= 16 && this.bankCardNumber.length <= 20) {
        let query = Object.assign({},this.$route.query,{
          bankCardNumber: this.bankCardNumber,
          bankName: this.bankName,
          userName: this.userName,
          openingBank: this.openingBank,
          id: this.id,
        })
        this.$router.replace({ path:'bankCheck', query});
      } else {
        Toast('请输入正确的银行卡号')
      }
    },
    onConfirm(value, index) {
      this.bankName = value
      this.bankSelectShow = false
    },
    onCancel() {
      this.bankSelectShow = false
    }
  }
};
</script>
<style lang="scss" scoped>
.btn {
  margin: 30px 15px;
  height: 40px;
  line-height: 40px;
  background: $red;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  color: #fff;
}
</style>